<template>
    <div class="">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane label="所有产品" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <span class="message-title">极速借</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <div class="message-title1">审批额度（元）</div>
                                <div class="message-conter">{{amount_total}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <div class="message-title1">当前可用额度（元）</div>
                                <div class="message-conter">{{amount_cur}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <div class="message-title1">期数(单位月)</div>
                                <div class="message-conter">{{scope.row.duration}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <div class="message-title1">综合月成本</div>
                                <div class="message-conter">{{scope.row.monthly_cost}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <div class="message-title1">趸交比例</div>
                                <div class="message-conter">{{scope.row.upfront}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <div class="message-title1">还款方式</div>
                                <div class="message-conter">{{repay_type}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template slot-scope="scope">
                                <el-button size="small" @click="See()">去借款</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import {jsyGetproduct} from '@/api/api';
    import md5 from "js-md5";
    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                unread: [],
                // read: [{
                //     date: '2018-04-19 20:00:00',
                //     title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                // }],
                // recycle: [{
                //     date: '2018-04-19 20:00:00',
                //     title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                // }],
                username:'',
                amount_cur:'',//当前可用额度（分）
                amount_total:'',//审批额度（分）
                repay_type:'',//还款方式(等额本息)
            }
        },
        created(){
            this.getPermissions()
            this.jsyGetproduct()
        },
        methods: {
            //获取权限
            getPermissions(){
            var aaa = sessionStorage.getItem('userInfo')
            var bbb = JSON.parse(aaa)
            // this.rolesId = bbb.rolesId
            // this.serviceinfo.state = this.rolesId
            // this.fid = bbb.fid
            // this.mid = bbb.mid
            // this.name = bbb.rolesName
            this.username = bbb.username
            },
            jsyGetproduct(){
                jsyGetproduct({},this.username).then(res => {
                    if(res.code == 405){
                        sessionStorage. removeItem('token')
                        this.$router.push('/login');
                    }else if(res.code == 200){
                        console.log(res)
                        this.unread = res.data.product_list
                        this.amount_cur = res.data.amount_cur/100
                        this.amount_total = res.data.amount_total/100
                        this.repay_type = res.data.repay_type
                    }
                })
            },
            See () {
                // let url = 'http://jie2.test.jisucloud.cn/partner/entry'
                // let url = 'http://m.test.jisucloud.cn/partner/entry'
                let url = 'https://jie.jisujie.com/partner/entry'
                // let key = "4c9db51879546ea1605a4e4ad2c1e3ae"
                let key = "718afc3c29f92af7c8f26ba0c3b26c75"
                const now = new Date().getTime()
                let partner = 'partner=shoubei#$&ts='+ now +'#$&uid='+ this.username +'#$&key=' + key
                let sign = md5(partner)
                window.open(url +'?ts='+ now +'&partner=shoubei&uid='+ this.username + '&sign=' + sign ); 
            },
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.message-title{
    /* cursor: pointer; */
    font-size: 22px;
}
.handle-row{
    margin-top: 30px;
}
.message-title1{
    color: #999;
}
.message-conter{
    font-size: 16px;
}
</style>

